<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
            /* grid-template-rows: 100px auto 25%;
            grid-template-columns: 100px 100px 200px 100px; */
            grid-template-rows: 100px auto 25%;
            grid-template-columns: 1fr 1fr 1fr 2fr;
        }
        .box2{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
            /* grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            grid-template-areas: 
            "a1 a1 a1" 
            "a2 a2 a3" 
            "a2 a2 a3"; */

            grid-template: 
            "a1 a1 a1" 1fr
            "a2 a2 a3" 1fr
            "a2 a2 a3" 1fr
            /1fr 1fr 1fr;

            gap: 10px 15px;
        }
        .box2 div{background: red;border: 1px black solid;}
        .box2 div:nth-child(1){grid-area: a1;}
        .box2 div:nth-child(2){grid-area: a2;}
        .box2 div:nth-child(3){grid-area: a3;}
    </style>
</head>
<body>
    <!--
        二维布局，纵横两个方向同时存在
        作用在grid容器上
        grid-template-rows  (同下 如果在横纵比较多，大小一样的情况下，可以用repeat(3,1fr)，重复3次每个的值1fr)
        grid-template-columns (对网络进行横纵划分，单位可以是像素、百分比、自适应以及fr单位(网格剩余空间比例单位))
        grid-template-areas (划分区域，不能形成特殊图形，只能矩形)
        grid-template 复合写法 写法上面
        row-gap
        column-gap(定义网格间隙的尺寸)
        gap 复合写法
        align-items 网格元素垂直拉伸方式
        justify-items 网格元素水平拉伸方式(stretch水平或垂直填充 start左侧或顶部对齐 end右侧或底部对齐 center)
        place-items 复合写法
        align-content  网络的垂直方式 有space-between等
        justify-content 网格的水平方式 要有空余空间
        place-content

        作用在子项
        grid-column-start 水平方向上的起始位置
        grid-column-end   水平方向上的结束位置(span属性，只有end有这个属性)
        grid-row-start    垂直方向上的起始位置
        grip-row-end      垂直方向上的结束位置(span属性，只有end有这个属性)
        grip-row，grip-column 复合写法eg        grip-column:2/3
        grip-area         当前网格所在的区域，有名字和位置表示法(grid-row-start，grid-column-start，grip-row-end，grid-column-end)
        align-self        单个网格的垂直对齐方式
        justify-self      单个网格的水平对齐方式
        place-self 复合写法
    -->
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>